<template>
  <div class="right-chart-1">
    <div class="lc1-header">拥堵路段TOP10</div>
    <div>
      <dv-scroll-board :config="config" class="scroll-list"/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RightChart1',
  props: {
    selectSections: {
      type: Array,
      default: () => Array
    }
  },
  data () {
    return {
      config: {
        header: ['排名', '路名', '拥堵系数'],
        data: [],
        rowNum: 5, // 表格行数
        headerHeight: 35,
        headerBGC: 'transparent', // 表头
        oddRowBGC: '#28293f', // 奇数行
        evenRowBGC: 'transparent', // 偶数行
        columnWidth: [50, 200, 100],
        align: ['center']
      }
    }
  },
  created () {
    // console.log('c', this.selectSections)
    this.initData()
  },
  watch: {
    selectSections (newV, oldV) {
      if (newV === null) {
        return
      }
      const result = []
      for (let i = 0; i < newV.length; i++) {
        const temp = []
        temp.push(newV[i].ranking + '')
        temp.push(newV[i].sectionName + '')
        temp.push(newV[i].trafficJam + '')
        result.push(temp)
      }
      // console.log(result)
      this.initData()
      // console.log(this.config.data)
    }
  },
  methods: {
    initData () {
      if (this.selectSections === null) {
        return
      }
      const result = []
      for (let i = 0; i < this.selectSections.length; i++) {
        const temp = []
        temp.push(this.selectSections[i].ranking + '')
        temp.push(this.selectSections[i].sectionName + '')
        temp.push(this.selectSections[i].trafficJam + '')
        result.push(temp)
      }
      // console.log(result)
      this.config = {
        header: ['排名', '路段名', '拥堵系数'],
        data: result,
        rowNum: 5, // 表格行数
        headerHeight: 35,
        headerBGC: 'transparent', // 表头
        oddRowBGC: '#051fa4A6', // 奇数行
        evenRowBGC: 'transparent', // 偶数行
        columnWidth: [100, 180, 150],
        align: ['center']
      }
    }
  }
}
</script>

<style lang="less">
  .right-chart-1 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-grow: 0;
    flex-direction: column;

    .lc1-header {
      text-align: center;
      height: 40px;
      margin-top: 10px;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      color: #fff;
    }

    .lc1-details {
      height: 50px;
      font-size: 16px;
      display: flex;
      align-items: center;
      text-indent: 20px;

      span {
        color: #096dd9;
        font-weight: bold;
        font-size: 35px;
      }
    }

    .lc1-chart {
      flex: 1;
    }

    .dv-scroll-board .header .header-item {
      color: #fff;
    }

    .dv-scroll-board .header {
      font-size: 20px;
      font-weight: bolder;
    }

    .scroll-list {
      width: 96%;
      height: 335px;
      margin-left: 6px;
    }
  }
</style>
